﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Building seen from everywhere</title>
    <link href="styles/jsdoc-default.css" rel="stylesheet" />
    <link href="styles/xviewer-styles.css" rel="stylesheet" />
    <script src="scripts/xbim-viewer.debug.bundle.js"></script>
</head>
<body>
    <div id="main">
            <div id="xviewer-controls">
                <div class="xviewer-control">
                    Camera coordinates
                    <input type="text" id="camX" value="-15000" />
                    <input type="text" id="camY" value="-15000" />
                    <input type="text" id="camZ" value="15000" />
                    <button onclick="SetCamera()">Set camera</button>
                    <script type="text/javascript">
                        function SetCamera() {
                            if (viewer) {
                                var iX = document.getElementById('camX');
                                var iY = document.getElementById('camY');
                                var iZ = document.getElementById('camZ');
                                viewer.setCameraPosition([iX.value, iY.value, iZ.value]);
                            }
                        }
                    </script>
                </div>
                <div class="xviewer-control">
                    Set left mouse button to 
                    <button onclick="if (viewer) viewer.navigationMode = 'orbit';">Orbit</button>
                    <button onclick="if (viewer) viewer.navigationMode = 'free-orbit';">Free orbit</button>
                    <button onclick="if (viewer) viewer.navigationMode = 'pan';">Pan</button>
                    <button onclick="if (viewer) viewer.navigationMode = 'zoom';">Zoom</button>
                    <br />
                    <button onclick="if (viewer) viewer.navigationMode = 'none';">Disable default navigation completely</button>
                </div>
                <div class="xviewer-control" title="Click to empty space of model to show default view of full extent.">
                    Default views on picked element:
                    <button onclick="if (viewer) viewer.show('front');">Front</button>
                    <button onclick="if (viewer) viewer.show('back');">Back</button>
                    <button onclick="if (viewer) viewer.show('top');">Top</button>
                    <button onclick="if (viewer) viewer.show('bottom');">Bottom</button>
                    <button onclick="if (viewer) viewer.show('left');">Left</button>
                    <button onclick="if (viewer) viewer.show('right');">Right</button>
                </div>
                <div class="xviewer-control">
                    Zoom to:
                    <button onclick="if (viewer) viewer.zoomTo(pickedId)">Picked element</button>
                    <button onclick="if (viewer) viewer.zoomTo()">Full extent</button>
                </div>
                <div class="xviewer-control">
                    <p>
                        Interactive clipping:
                        <br />
                        <button onclick="if (viewer) viewer.clip();">Interactive clipping</button>
                        <button onclick="if (viewer) viewer.unclip();">Unclip</button>
                    </p>
                    <p>
                        Clip by defined origin and direction:
                        <br />
                        Origin:
                        <input type="text" id="clipOrigX" value="0" />
                        <input type="text" id="clipOrigY" value="0" />
                        <input type="text" id="clipOrigZ" value="0" />
                        <br />
                        Direction:
                        <input type="text" id="clipNormX" value="-1" />
                        <input type="text" id="clipNormY" value="0" />
                        <input type="text" id="clipNormZ" value="0" />
                        <br />
                        <button onclick="Clip()">Clip</button>
                        <button onclick="if (viewer) viewer.unclip();">Unclip</button>
                        <script type="text/javascript">
                            function Clip() {
                                var oX = document.getElementById('clipOrigX').value;
                                var oY = document.getElementById('clipOrigY').value;
                                var oZ = document.getElementById('clipOrigZ').value;

                                var nX = document.getElementById('clipNormX').value;
                                var nY = document.getElementById('clipNormY').value;
                                var nZ = document.getElementById('clipNormZ').value;

                                if (viewer)
                                    viewer.clip([oX, oY, oZ], [nX, nY, nZ]);
                            }
                        </script>
                    </p>
                </div>
                <div class="xviewer-control">
                    Click action: 
                    <select id="cmbHide">
                        <option value="noAction">No action</option>
                        <option value="hideProduct">Hide product</option>
                        <option value="hideType">Hide type</option>
                        <option value="highlight">Highlight</option>
                    </select>
                    <button onclick="if (viewer) viewer.resetStates()">Show all</button>
                    <script type="text/javascript">
                        function initHiding() {
                            viewer.on('pick', function (args) {
                                var cmb = document.getElementById('cmbHide');
                                var option = cmb.value;
                                switch (option) {
                                    case 'hideProduct':
                                        viewer.setState(xState.HIDDEN, [args.id]);
                                        break;
                                    case 'hideType':
                                        var type = viewer.getProductType(args.id);
                                        viewer.setState(xState.HIDDEN, type);
                                        break;
                                    case 'highlight':
                                        viewer.setState(xState.HIGHLIGHTED, [args.id]);
                                        break;
                                    default:
                                        break;
                                }
                            });
                        };
                    </script>
                </div>
                <div class="xviewer-control">
                    Rendering mode
                    <label>
                        <input type="radio" name="rRenderingMode" checked="checked" onchange="if (viewer) viewer.renderingMode = 'normal';"/> Normal
                    </label>
                    <label>
                        <input type="radio" name="rRenderingMode" onchange="if (viewer) viewer.renderingMode = 'x-ray';" /> X-Ray
                    </label>
                </div>
            </div>
            <canvas id="viewer" width="500" height="300"></canvas>
            <div>
                You have picked a product: <span id="productId">model</span>. It is a center of orbiting now.
            </div>
            <div id="errors"></div>


            <script type="text/javascript">
              
                var check = xViewer.check();
                var viewer = null;
                var pickedId = null;
                if (check.noErrors) {
                    viewer = new xViewer('viewer');
                    viewer.on('pick', function (args) {
                        var id = args.id;
                        viewer.setCameraTarget(id);
                        pickedId = id;
                    });

                    viewer.on('loaded', function () {
                        initHiding();
                        viewer.start();
                    });

                    viewer.on('error', function (arg) {
                        var container = document.getElementById('errors');
                        if (container) {
                            //preppend error report
                            container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre> <br />" + container.innerHTML;
                        }
                    });

                    viewer.on('pick', function (args) {
                        var id = args.id;
                        var span = document.getElementById('productId');
                        if (span) {
                            span.innerHTML = id ? id : 'model';
                        }

                    });
                    viewer.load('data/SampleHouse.wexbim');
                }
                else {
                    var msg = document.getElementById('errors');
                    for (var i in check.errors) {
                        var error = check.errors[i];
                        msg.innerHTML += "<pre style='color: red;'>" + error + "</pre> <br />";
                    }
                }
            </script>

            <br />
            <br />
            <div>
                <a href="tutorial-4_Building_seen_from_everywhere.html">Back to tutorial</a>
            </div>
    </div>
</body>
</html>
